<script setup lang="ts">
import { Close } from '@icon-park/vue-next'
import router from '@renderer/plugins/router'
import { ref } from 'vue'
const routes = ref<{ title: string; name: string }[]>([])
router.beforeResolve(async (to) => {
  if (Object.keys(to.query).length > 0 || Object.keys(to.params).length > 0) return
  if (!to.meta.menu?.title || routes.value.find((r) => r.name == to.name)) return
  if (!to.fullPath.startsWith('/admin')) return
  if (routes.value.length > 10) {
    routes.value.splice(0, 10)
  }
  routes.value.unshift({ name: to.name as string, title: to.meta.menu?.title })
})
const handleDelRoutes = (index: number) => {
  routes.value.splice(index, 1)
}
</script>

<template>
  <div class="p-2 border-t relative overflow-auto h-[50px]" v-show="routes.length">
    <div class="overflow-x-auto whitespace-pre absolute flex gap-2">
      <div
        v-for="(route, index) of routes"
        :key="index"
        class="bg-white inline-flex items-center hover:bg-[#fff2e2] hover:text-black duration-300 rounded-md shadow-sm py-2 px-3 text-xs"
        :class="{ 'action-bg ': $route.name == route.name }">
        <router-link :to="{ name: route.name }">
          {{ route.title }}
        </router-link>
        <Close
          theme="outline"
          size="10"
          fill="#333"
          class="ml-2"
          v-if="$route.name != route.name"
          @click="handleDelRoutes(index)" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.action-bg {
  @apply bg-[#fff2e2] text-black;
}
</style>
